import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

///Expanded 继承字 Flexible，fit 参数固定为 FlexFit.tight，也就是说 Expanded 必须（强制）填满剩余空间
class ExpandWidget extends StatelessWidget {
  ExpandWidget({Key ?key, @required this.text}) : super(key: key);
  final String? text;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(text??""),
        ),
        body: Column(
          children: [
            Row(
              children: <Widget>[
                Container(
                  color: Colors.blue,
                  height: 50,
                  width: 100,
                ),
                Expanded(
                  child: Text(
                    'OutlineButton'
                  ),
                ),
                Container(
                  color: Colors.blue,
                  height: 50,
                  width: 100,
                ),
              ],
            ),
            SizedBox(
              height: 20,
            ),
            Expanded(
              child: SingleChildScrollView(
                child: ConstrainedBox(
                  constraints: BoxConstraints(
                      maxHeight: MediaQuery.of(context).size.height),
                  child: Column(
                    children: <Widget>[
                      Flexible(
                        flex: 1,
                        child: Container(
                          color: Colors.blue,
                          alignment: Alignment.center,
                          child: Text(
                            '1 Flex/ 6 Total',
                            style: TextStyle(color: Colors.white),
                          ),
                        ),
                      ),
                      Flexible(
                        flex: 2,
                        child: Container(
                          color: Colors.red,
                          alignment: Alignment.center,
                          child: Text(
                            '2 Flex/ 6 Total',
                            style: TextStyle(color: Colors.white),
                          ),
                        ),
                      ),
                      Flexible(
                        flex: 3,
                        child: Container(
                          color: Colors.green,
                          alignment: Alignment.center,
                          child: Text(
                            '3 Flex/ 6 Total',
                            style: TextStyle(color: Colors.white),
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ),
          ],
        ));
  }
}
